<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";

	import {
		searchDataQbxx
	} from "@/api/search";
	import {
		addOrUpdateQbxx
	} from "@/api/addOrUpdate";

	const city = window.globalObj.name;
	const editorRef = shallowRef();

	const toolbarConfig = {};
	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");

	

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"主要明确某某市对上、对下和友邻、军地之间信息通信的保障目的、保障对象、保障内容、保障重点等。<br/>1.保障目的：市、县（区）各级人防指挥机构（含街道、社区）以及重要目标指挥机构指挥通信畅通，协同驻军部队保障人防指挥部与军队相关部门指挥通信畅通。<br/>2.保障对象：本级人防指挥部，下级人防指挥部，街道、社区指挥机构，辖区内重要目标单位指挥机构，友邻单位人防指挥部，军队有关部门。<br/>3.保障内容：情报信息获取、警报报知、指挥所信息节点、通信网络、指挥控制系统、信息防护等。<br/>4.保障重点：市、县（区）各级人防指挥所（地面指挥中心）间的指挥通信畅通。本级人防指挥所（地面指挥中心）与辖区内重要目标单位的指挥通信畅通。<br/>5.保障方法：①按照统一组织、统一计划、分级负责，通信网络上级保下级，信息平台（含网端设备、内部网络、操作系统、数据等）本级自行保障的方式，协调组织各种通信保障；②采取固定保障与机动保障相结合、专用通信与公用通信相结合、多手段与多样式相结合方式，综合运用各种通信手段，建立多路由的迂回通信网，确保人防指挥通信顺畅不间断。"
	);
	
	// 加载html
	const initHtml = () => {
		searchDataQbxx({ m: "任务要求" }).then((res) => {
			const { data } = res
			valueHtml.value = data.find((x) => x.k === "任务要求")?.v || "";
		})
	};


	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateQbxx({
					m: "任务要求",
					data: [{
						k: "任务要求",
						v: valueHtml.value,
					}],
				})
				.then((result) => {
					if (result.code === 200){
						 ElMessage.success("操作成功");
						 initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}

	onMounted(() => {
		initHtml();

	});
	onBeforeUnmount(() => {
		const editor = editorRef.value;
		if (!editor) return;
		editor.destroy();
	});
</script>
<template>
	<div class="">
		<!-- <div class="top-15">
			情报信息保障计划主要明确{{city}}人民防空情报信息保障的任务需求、能力现状、情报获取、警报报知、指挥所信息节点、通信网络、指挥控制系统、信息防护、力量运用，以及有关规定和要求等内容，是组织人民防空情报信息保障的基本依据。
		</div> -->

		<FirstTitle name="任务要求"  />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>




		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>